<template>
	<view class="content">
		<view class="section section-0">
			<view class="section-body">
				<view class="tab">
					<view
						@click="setCurChartsTab(idx, item)"
						:class="`item ${curIdx === idx ? 'item__active' : ''} ${curIdx + 1 === idx ? 'item__active_next' : ''}`"
						v-for="(item, idx) in chartsTabList"
						:key="item.type"
					>
						<view class="label">{{ item.name }}</view>
						<view class="shape">
							<view class="shape-body"></view>
						</view>
						<view class="shape shape-mirrow">
							<view class="shape-body"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="problem-wrapper" v-if="!dw_nameName">
			<image src="https://www.mescroll.com/img/mescroll-empty.png"></image>
			<view class="">~ 空空如也 ~</view>
		</view>
		<view class="section section-1">
			<view class="table-container">
				<view class="title" @click="showDropdown">
					<view class="text">{{ dw_nameName }}</view>
					<image v-if="dw_nameName" src="../../../../src/imgs/xiangxiala.png" />
				</view>
				<view class="content"  v-show="collapse&&dw_nameName">
					<view v-for="item in teamList" @click="dropDown(item)">{{ item.dw_name }}</view>
				</view>
			</view>
			<view class="section section-2" v-for="(item, index) in list" :key="index" v-show="item.type != null">
				<view class="title">
					{{ item.type }}
					<!-- <text>{{ item.kf_point_total }}/{{ item.point_total }}</text> -->
				</view>
				<view class="content" v-for="item2 in item" v-show="item2.point != null">
					<view class="text">
						{{ item2.content }}
						<text>(扣分:{{ item2.kf_point }}分)</text>
					</view>
					<view class="button" v-if="item2.status == 0" v-show="is_comment==0">
						<u-button type="primary" size="small" @click="OpenScoring(item2)">评分</u-button>
					</view>
					<view class="buttons" v-else-if="item2.status == 1">
						<u-button type="primary" size="small" @click="ViewRatings(item2)">评分详情</u-button>
					</view>
				</view>
			</view>
		</view>

		<view class=" section-3" v-if="dw_nameName">
			<view class="history" @click="history">
				<image src="../../../../src/imgs/lishijilu.png" />
				历史记录
			</view>
			<view class="totalDeduction">
				总扣分：{{totalDeduction}} 分
			</view>
			<view class="button" v-if="is_comment==0">
				<button @click="add">提交评分</button>
			</view>
			<view class="buttons" v-if="is_comment!==0">
				<view class="button" >不可多次评价</view>
			</view>
		</view>
		<!-- 弹框 -->
		<view>
			<u-popup :show="SpringFrame" :round="20" mode="center" :closeOnClickOverlay="false">
				<view class="popup">
					<view class="top">
						{{DeductPoints}}
					</view>
					<view class="title">
						<view class="DeductPoints ">
							<text>扣分：</text>
							<u-slider v-model="fraction" min="0" :max="max" showValue class="slider"></u-slider>
						</view>
						<view class="DescriptionContent " v-show="!lookSpringFrame">
							<text>描述：</text>
							<u--textarea v-model="DescriptionContent" placeholder="请输入描述内容" height="100px" maxlength="-1"></u--textarea>
						</view>
						<view class="DescriptionContent " v-show="lookSpringFrame">
							<text>描述：</text>
							<u--textarea v-model="DescriptionContent" disabled placeholder="请输入描述内容" height="100px" maxlength="-1"></u--textarea>
						</view>
						<view class="Photo" v-show="!lookSpringFrame">
							<text>照片：</text>
							<u-upload
								:fileList="fileList"
								:previewFullImage="true"
								@afterRead="afterRead($event, 'fileList')"
								@delete="deleteMedia($event, 'fileList')"
								multiple
								:maxCount="4"
							></u-upload>
						</view>
						<view class="Photo" v-show="lookSpringFrame">
							<text>照片：</text>
							<text class="images" >
								<text  v-for="(item3,index) in imgs" :key="index">
									<img :src="item3" alt="" @click='onClick(index,imgs)' >
								</text>
							</text>
						</view>
					</view>
					<view class="bottom">
						<button @click="close()" :class="`noadd ${lookSpringFrame === true ? 'noadd__active' : ''} `">关闭</button>
						<button @click="Preservation" v-show="!lookSpringFrame">保存</button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import { projectTeamTeamList, projectTeamCompanyEvaluate, projectTeamComment,ProjectTeamDetail } from '@/api/project.js'
import { mapGetters } from 'vuex'
import { uploadUrl } from '@/baseUrl.js'
export default {
	data() {
		return {
			DeductPoints:'',
			imgs:[],
			max:'',
			lookSpringFrame: false,
			fileList: [],
			DescriptionContent: '',
			fraction: '',
			SpringFrame: false,
			company_id: '',
			collapse: false,
			chartsTabList: [
				{
					name: '施工单位',
					type: 'node'
				},
				{
					name: '监理单位',
					type: 'build'
				},
				{
					name: '设计单位',
					type: 'plan'
				},
				{
					name: '分包单位',
					type: 'material'
				}
			],
			curChartsTab: {
				name: '施工单位',
				type: 'node'
			},
			curIdx: 0,
			teamList: [],
			dw_nameName: '',
			list: [],
			companyEvaluate: [],
			asdasdasda: {},
			totoList: [],
			MonomerId: '',
			is_comment:'',
			totalDeduction:0
		}
	},
	computed: {
		...mapGetters({
			curProject: 'system/getCurProject'
		})
	},
	methods: {
		//  提交
		add() {
			let obj ={
				project_id:this.curProject.id,
				type: this.curChartsTab.name,
				company_id: this.company_id,
				content:this.totoList,
			}
			projectTeamComment({...obj}).then(res => {
				if(res.data.code==1){
					this.is_comment=1
					uni.showToast(
						{title: '提交成功', duration: 1000, icon: 'success' }
					);
							this.teamLists()
				}else{
					uni.showToast(
						{title: res.data.msg, duration: 1000, icon: 'error' }
					);
				}
			})
		},
		// 切换top栏
		setCurChartsTab(idx, item) {
			this.curIdx = idx
			this.curChartsTab = item
			this.teamLists()
		},
		showDropdown(){
			this.collapse=!this.collapse
		},
		// 查看历史
		history() {
			const params = {
				project_id:this.curProject.id,
				type: this.curChartsTab.name,
				company_id: this.company_id
			}
			uni.navigateTo({
				url: '/pages/statistics/safety/team/point/index?params=' + JSON.stringify(params)
			})
		},

		// 删除照片
		deleteMedia(event, type) {
			this[type].splice(event.index, 1)
		},
		// 新增
		async afterRead(event, type) {
			let lists = [].concat(event.file)
			let fileListLen = this[type].length
			lists.map(item => {
				this[type].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[type][fileListLen]
				this[type].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						file_id: result.data.file_id,
						file_path:result.data.file_path,
					})
				)
				fileListLen++
			}
		},
		// 上传照片
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: uploadUrl, // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					success: res => {
						resolve(JSON.parse(res.data))
					},
					fail(res) {
						console.log(res, 'uploadErr')
					}
				})
			})
		},
		// 去评分
		OpenScoring(e) {
			this.DeductPoints='评分'
			this.asdasdasda = e
			this.MonomerId = e.id
			this.fileList = []
			this.fraction = ''
			this.DescriptionContent = ''
			this.max=e.point
			this.SpringFrame = true
			this.lookSpringFrame = false
		},
		// 查看评分
		ViewRatings(item) {
			this.DeductPoints='评分详情'
			ProjectTeamDetail({project_id:this.curProject.id,company_id: this.company_id,id:item.id}).then(res=>{
				this.fraction=res.data.data.kf_point
				this.max=res.data.data.kf_point
				this.DescriptionContent=res.data.data.kf_reason
				this.imgs=res.data.data.file_path.split(',')
			})
			this.SpringFrame = true
			this.lookSpringFrame = true
		},
		//预览图片
		onClick(index,item) {
			uni.previewImage({
				current: index,
				urls: item,
				indicator: 'number',
				loop: true,
			})
		},
		// 关闭弹框
		close(){
			this.fraction=''
			this.max=''
			this.DescriptionContent=''
			this.imgs=[]
			this.SpringFrame=false
		},
		// 保存评分
		Preservation() {
			this.totalDeduction=0
			// this.MonomerId
			// this.asdasdasda.status = 3
			if( this.fraction==0){
				this.$refs.uNotify.show({
				            top:20,
				            type: 'success',
				            color: '#FFFFFF',
				            bgColor: '#1534ce',
				            message: '请选择分数',
				            duration: 1000 * 3,
				            fontSize: 13,
				            safeAreaInsetTop:true
				        })
			}else{
				this.SpringFrame = false
				let objs = {}
				objs.file_path = this.fileList[0]
					? this.fileList
							.map(obj => {
								return obj.file_path
							})
							.join(',')
					: ''
				objs.kf_point = this.fraction
				objs.kf_reason = this.DescriptionContent
				objs.id = this.MonomerId
				this.totoList.push(objs)
				for(var i = 0;i<this.totoList.length;i++){
					for(var j =i+1;j<this.totoList.length;j++){
						if(this.totoList[i].id==this.totoList[j].id){
							this.totoList.splice(i,1)
						}
					}
				}
				for(var k in this.list){
					if(this.list[k].type){
						for(var g in this.list[k]){
							if(this.list[k][g].id==this.MonomerId){
								this.list[k][g].kf_point=this.fraction
							}
						}
						
					}
					
				}
				this.totoList.forEach(res=>{
					this.totalDeduction+= Number(res.kf_point)
				})
			}
			
		},
		// 选择单位
		dropDown(e) {
			this.company_id = e.id
			this.dw_nameName = e.dw_name
			this.projectTeamCompanyEvaluate()
			this.collapse = false
		},
		// 查询单位
		teamLists() {
			projectTeamTeamList({ project_id:this.curProject.id, type: this.curChartsTab.name }).then(res => {
				this.company_id = res.data.data[0].id
				this.dw_nameName = res.data.data[0].dw_name
				this.teamList = res.data.data
				this.projectTeamCompanyEvaluate()
			})
		},
		// 查询列表
		projectTeamCompanyEvaluate() {
			this.totalDeduction=0
			let obj = {
			project_id:this.curProject.id,
				type: this.curChartsTab.name,
				company_id: this.company_id
			}
			projectTeamCompanyEvaluate({ ...obj }).then(res => {
				this.is_comment=res.data.data.is_comment
				this.list = res.data.data
				this.companyEvaluate = res.data.data[0]
				for(var k in this.list){
					if(this.list[k].kf_point_total){
					this.totalDeduction+= Number(this.list[k].kf_point_total)
					}
				}
				
			})
		}
	},
	created() {
		this.teamLists()
	}
}
</script>

<style lang="scss" scoped>
.section-0 {
	width: 100%;
	background-color: #3a5df5;
	.section-body {
		width: 100%;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		background-color: #fff;
		overflow: hidden;
		.tab {
			width: 100%;
			height: 80rpx;
			@include clear();
			background-color: #1534ce;
			.item {
				width: 25%;
				float: left;
				height: 80rpx;
				background-color: #1534ce;
				position: relative;
				.label {
					height: 80rpx;
					line-height: 80rpx;
					position: relative;
					z-index: 10;
					box-sizing: border-box;
					text-align: center;
					width: 100%;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #ffffff;
				}
				.shape {
					z-index: 1;
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					bottom: 0;
					left: -50rpx;
					background: #000;
					display: none;
					background-color: #fff;
					overflow: hidden;
					.shape-body {
						width: 50rpx;
						height: 50rpx;
						background-color: #1534ce;
						border-bottom-right-radius: 40rpx;
					}
				}
				.shape-mirrow {
					z-index: 1;
					left: 0;
					display: none;
					.shape-body {
						border-bottom-right-radius: 0rpx;
						border-bottom-left-radius: 40rpx;
					}
				}
			}
			.item__active {
				border-top-left-radius: 40rpx;
				border-top-right-radius: 40rpx;
				background-color: #fff;
				.label {
					color: #46464a;
				}
				.shape {
					display: block;
				}
				.shape-mirrow {
					display: none;
				}
			}
			.item__active_next {
				border-bottom-right-radius: 50rpx;
				.shape {
					display: none;
				}
				.shape-mirrow {
					display: block;
				}
			}
		}
	}
}
.problem-wrapper {
						color: #808080;
						margin: 0 auto;
						text-align: center;
						image {
							margin-top: 300rpx;
							width: 200rpx;
							height: 200rpx;
						}
					}
.section-1 {
	margin-bottom: 190rpx;
	width: 99%;
	background-color: #fefefe;
	.table-container {
		margin-top: 50rpx;
		margin-left: 40rpx;
		.title {
			width: calc(100vw - 90rpx);
			font-size: 15px;
			font-weight: normal;
			display: flex;
			.text {
				max-width: 700rpx;
				height: 20px;
				overflow: hidden;
			}
			image {
				margin-left: 30rpx;
				margin-top: 15rpx;
				width: 30rpx;
				height: 15rpx;
			}
		}
		.content {
			// position: fixed;
			z-index: 1;
			width: calc(100vw - 130rpx);
			background-color: #f2f2f0;
			margin-right: 40rpx;
			padding: 20rpx;
			font-size: 13px;
		}
	}
}
.section-2 {
	webkit-box-shadow: 0px 0px 10px #cccccc;
	moz-box-shadow: 0px 0px 10px #cccccc;
	box-shadow: 0px 0px 10px #cccccc;
	border-radius: 30rpx;
	margin: 30rpx 50rpx;
	padding: 30rpx 30rpx 5rpx 30rpx;
	.title {
		border-bottom: 1px solid #f7f3f7;
		padding-bottom: 20rpx;
		margin-bottom: 30rpx;
		color: #89959e;
		font-size: 30rpx;
		text {
			float: right;
		}
	}
	.content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		.text {
			font-size: 26rpx;
			width: 450rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.button {
			font-size: 26rpx;
			button {
				background-color: #1534ce;
				border: none;
				padding: 5rpx 0;
				width: 100rpx;
				height: 40rpx;
				border-radius: 30rpx;
			}
		}
		.buttons {
			font-size: 26rpx;
			button {
				background-color: #8dcdfa;
				border: none;
				padding: 5rpx 0;
				width: 100rpx;
				height: 40rpx;
				border-radius: 30rpx;
			}
		}
	}
}
.section-3 {
	width: 100vw;
	height: 150rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	background-color: white;
	webkit-box-shadow: 0px 0px 10px #cccccc;
	moz-box-shadow: 0px 0px 10px #cccccc;
	box-shadow: 0px 0px 10px #cccccc;
	.history {
		width: 110rpx;
		padding: 20rpx;
		margin-left: 50rpx;
		margin-right: 30rpx;
		font-size: 13px;
		image {
			margin: 0 25rpx 10rpx 30rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}
	.button {
		margin-top: 20rpx;
		button {
			width: 270rpx;
			border: none;
			color: white;
			background-color: #2f5eff;
			border-radius: 50rpx;
		}
	}
	.totalDeduction{
		text-align: center;
		line-height: 150rpx;
		margin-right: 30rpx;
	}
	.buttons {
		margin-top: 10rpx;
		.button {
			width: 270rpx;
			height: 90rpx;
			border: none;
			color: #E1DBE1;
			line-height: 90rpx;
			text-align: center;
			background-color: #F2F2FA;
			border-radius: 50rpx;
		}
	}
}
.popup {
	width: 90vw;
	height: 65vh;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	.top {
		height: 100rpx;
		text-align: center;
		font-size: 20px;
		line-height: 100rpx;
		color: white;
		background-color: #3a5df5;
	}
	.title {
		margin: 40rpx;
		.DeductPoints {
			display: flex;
			margin-bottom: 20rpx;
			text {
				height: 80rpx;
				line-height: 80rpx;
			}
			.slider {
				width: 490rpx;
			}
		}
		.DescriptionContent {
			display: flex;
			margin-bottom: 40rpx;
		}
		.Photo {
			display: flex;
			.images{
				display: flex;
				flex-wrap: wrap;
				flex: 1;
					img{
						width: 140rpx;
						height: 140rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
				}
			}
		}
	}
	.bottom {
		position: absolute;
		bottom: 30rpx;
		margin-left: 140rpx;
		display: flex;
		button {
			width: 200rpx;
			height: 50rpx;
			font-size: 13px;
			text-align: center;
			line-height: 50rpx;
			color: white;
			border-radius: 30rpx;
			background-color: #3a5df5;
		}
		.noadd__active{
			margin-left: 100rpx;
		}
	}
}
</style>
